import { pageTophubRecordWeChat } from '@/services/api/api-tophub-record';
import { LightFilter, ProColumns, ProFormSelect, ProTable } from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';
import { Input } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';

interface TableRecordWeChatProps {
  createdTimes: string[];
  onRefurbish: () => void;
}
const { Search } = Input;
const TableRecordWeChat: React.FC<TableRecordWeChatProps> = ({ createdTimes, onRefurbish }) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [search, setSearch] = useState({
    name: '',
    dataReleaseTimes: createdTimes,
    levelIds: [2000, 3000],
    sorter: {},
  });

  useEffect(() => {
    setSearch({
      ...search,
      dataReleaseTimes: createdTimes,
    });

    actionRef.current?.reloadAndRest();
  }, [createdTimes]);

  const columns: ProColumns<TophubRecordData.RecordWeChatPage>[] = [
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          热点
        </span>
      ),
      dataIndex: 'name',
      align: 'center',
      copyable: true,
      ellipsis: true,
      width: '23%',
      render: (dom, entity, index, action) => (
        <a
          href={entity.url}
          target="_blank"
          style={{
            textAlign: 'start',
          }}
        >
          {dom}
        </a>
      ),
    },

    // {
    //   title: (
    //     <span
    //       style={{
    //         color: '#99a3b7',
    //         fontSize: 12,
    //         textAlign: 'center',
    //         fontWeight: 'normal',
    //       }}
    //     >
    //       渠道
    //     </span>
    //   ),
    //   dataIndex: 'channelName',
    //   align: 'center',
    // },
    // {
    //   title: (
    //     <span
    //       style={{
    //         color: '#99a3b7',
    //         fontSize: 12,
    //         textAlign: 'center',
    //         fontWeight: 'normal',
    //       }}
    //     >
    //       层级
    //     </span>
    //   ),
    //   dataIndex: 'levelName',
    //   align: 'center',
    // },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          阅读量
        </span>
      ),
      dataIndex: 'dataReadCount',
      align: 'center',
      sorter: true,
      render: (dom, entity, index, action) => {
        if (entity.dataReadCount > 100000) {
          return <a>10万+</a>;
        } else {
          return dom;
        }
      },
      width: '85px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          点赞量
        </span>
      ),
      dataIndex: 'dataLikeCount',
      align: 'center',
      sorter: true,
      width: '85px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          评论量
        </span>
      ),
      dataIndex: 'dataCommentCount',
      align: 'center',
      sorter: true,
      width: '85px',
    },

    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          在看量
        </span>
      ),
      dataIndex: 'dataWatchCount',
      align: 'center',
      sorter: true,
      width: '85px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          转发量
        </span>
      ),
      dataIndex: 'dataForwardingCount',
      align: 'center',
      sorter: true,
      width: '85px',
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          综合
        </span>
      ),
      dataIndex: 'dataScoreTotal',
      align: 'center',
      sorter: true,
      width: '100px',
    },
    // {
    //   title: (
    //     <span
    //       style={{
    //         color: '#99a3b7',
    //         fontSize: 12,
    //         textAlign: 'center',
    //         fontWeight: 'normal',
    //       }}
    //     >
    //       收藏量
    //     </span>
    //   ),
    //   dataIndex: 'dataCollectCount',
    //   align: 'center',
    // },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          媒体
        </span>
      ),
      width: 160,
      dataIndex: 'sourceName',
      align: 'center',
      render: (dom, entity, index, action) => entity.sourceName,
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          日期
        </span>
      ),
      dataIndex: 'dataReleaseTime',
      align: 'center',
      width: 150,
    },
  ];

  return (
    <>
      <ProTable<TophubRecordData.RecordWeChatPage>
        columns={columns}
        actionRef={actionRef}
        rowKey="key"
        // polling={2000}
        dateFormatter="id"
        defaultSize={'small'}
        search={false}
        options={{
          density: false,
          setting: false,
        }}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        ghost
        scroll={{
          x: '1100px',
        }}
        request={async (params = {}, sorter) => {
          setSearch({
            ...search,
            sorter: sorter,
          });

          const response = await pageTophubRecordWeChat({
            ...params,
            ...search,
            sorter: sorter,
          });
          if (response.code === 0 && Array.isArray(response.data?.data)) {
            return {
              data: response.data?.data,
              success: true,
              total: response.data?.total,
            };
          } else {
            return {
              data: [],
              success: false,
              total: 0,
            };
          }
        }}
        toolbar={{
          search: {
            onSearch: (value: string) => {
              setSearch({
                ...search,
                name: value,
              });
              actionRef.current?.reloadAndRest();
            },
          },
          filter: (
            <LightFilter initialValues={{ createdTime: Date.now(), sex: 0, recordIsCity: 1 }}>
              <ProFormSelect
                name="sex"
                label="媒体"
                allowClear={false}
                fieldProps={{
                  labelInValue: true,
                  onChange(date) {
                    let levelIds;
                    if (date.length === 0) {
                      // 可以使用消息框或其他方式提醒用户
                      levelIds = ['2000', '3000'];
                      return false;
                    }
                    // 如果选择了 '全部'（value 中包含 `0`），设置 levelIds 为 [2000, 3000]
                    if (date.value === '0') {
                      levelIds = ['2000', '3000']; // 注意要转为字符串，所以用 '2000' 和 '3000'
                    } else {
                      // 否则获取其他选择的值
                      levelIds = [date.value];
                    }
                    setSearch({
                      ...search,
                      levelIds: levelIds,
                    });
                    actionRef.current?.reloadAndRest();
                  },
                }}
                valueEnum={{
                  0: '全部',
                  2000: '市属媒体',
                  3000: '区县媒体',
                }}
              />
            </LightFilter>
          ),
        }}
      />
    </>
  );
};

export default TableRecordWeChat;
